<template>
  <div>
    <!-- 文章筛选 -->
    <div class="al-select-wrap">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- 分类筛选 -->
        <el-form-item label="标签">
          <el-select v-model="formInline.category_id" placeholder="全部">
            <el-option label="全部" value></el-option>
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) in category"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 热门筛选 -->
        <el-form-item label="热门">
          <el-select v-model="formInline.hots" placeholder="全部">
            <el-option label="全部" value></el-option>
            <el-option label="热门" :value="1"></el-option>
            <el-option label="普通" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">筛选</el-button>
        </el-form-item>
      </el-form>
      <!-- 搜索文章 -->
      <div class="srach-wrap">
        <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="toSearch"></el-input>
        <el-button type="primary" @click="$router.push('/articleadd')">发布文章</el-button>
      </div>
      <!-- 发布文章 -->
      <div class="articleAdd-wrap">
        <el-button type="primary" @click="$router.push('/articleadd')">发布文章</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "screen",
  data() {
    return {
      // 搜索
      toSearch: "",
      // 筛选数据
      formInline: {
        category_id: "",
        hot: null
      }
    };
  }
};
</script>
<style lang='less'>
// 筛选
.al-select-wrap {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  // 筛选表单
  .articleAdd-wrap {
    .articleAdd {
      // 发布文章
      background: red;
      color: #fff;
      padding: 10px 15px;
      border-radius: 5px;
      box-sizing: border-box;
    }
  }
  .srach-wrap {
    box-sizing: border-box;
    display: flex;
    padding: 0px 15px 20px;
  }
}
</style>